<template>
	<scroll-view class="page" scroll-y="true" @scrolltolower="loadDataFn">
		<xzfx-empty v-if="list.length === 0" tips="暂无出价记录" />
		<view class="xzfx-car-item" v-for="(item,index) in list" :key="index" @click.stop="$go('/pages/car-auction/details?id=' + item.auctionId)">
			<image :src="item.photos.split(',')[0]" mode=""></image>
			<view class="car-info">
				<view class="car-title">
					{{ item.truckBrand }}
					{{ item.truckType }}
				</view>
				<view class="car-time">时间:<text>{{ item.createTime }}</text></view>
				<view class="car-price">报价:<text>{{ item.quotePrice }}</text>万元</view>
			</view>
		</view>
		<xzfx-divider v-if="list.length > 10">{{ dividerTitle }}</xzfx-divider>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				auctionId: "",
				total: 0,
				list: [],
				pageNo: 1,
				pageSize: 10,
				dividerTitle: "暂无更多"
			};
		},
		onLoad(e) {
			this.auctionId = e.auctionId || ""
			this.getDataFn()
		},
		methods: {
			loadDataFn(){
				if(this.total > this.list.length){
					this.pageNo = this.pageNo + 1
					this.getDataFn()
				}else{
					this.dividerTitle = "暂无更多"
				}
			},
			getDataFn(){
				this.dividerTitle = "加载中......"
				this.$apis.carAuction.record({
					auctionId: this.auctionId,
					pageNo: this.pageNo,
					pageSize: this.pageSize
				}).then(res => {
					this.dividerTitle = "暂无更多"
					this.total = res.total
					this.list = this.list.concat(res.items)
				}).catch(err => {
					this.dividerTitle = "暂无更多"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.page{
		height: 100vh;
		.xzfx-car-item{
			display: flex;
			justify-content: space-between;
			background-color: #fff;
			margin: $xzfx-spacing;
			border-radius: 20rpx;
			overflow: hidden;
			padding: $xzfx-spacing;
			image{
				width: 200rpx;
				height: 130rpx;
				display: block;
				border-radius: 20rpx;
			}
			.car-info{
				width: calc(100% - 220rpx);
				.car-title{
					font-size: 32rpx;
					line-height: 36rpx;
					font-weight: bold;
					-webkit-line-clamp: 2;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.car-time{
					font-size: 28rpx;
					color: #666;
					margin-top: 10rpx;
					text{
						color: #333;
						font-size: 32rpx;
						padding: 0 10rpx;
					}
				}
				.car-price{
					font-size: 28rpx;
					color: #666;
					margin-top: 10rpx;
					text{
						color: #333;
						font-size: 32rpx;
						padding: 0 10rpx;
					}
				}
			}
		}
	}
</style>